<template>
  <basic-container v-loading="loading">
    <!-- START goBack -->
    <div class="el-page-header haruyuki-mb-20">
      <div
        class="el-page-header__left haruyuki-flex-center haruyuki-size-18"
        @click="goBack"
      >
        <i class="el-icon-arrow-left"></i>
        <div class="haruyuki-size-16">返回</div>
      </div>
      <div class="el-page-header__content">支付即开票</div>
    </div>
    <section class="haruyuki-bg-color-white haruyuki-padding">
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-postcard"></i
          ><span class="haruyuki-ml-6">{{ labelData.payTitle }}</span>
        </div>
        <!-- active-color="#13ce66" -->
      </div>
      <div class="haruyuki-content merchant-box">
        <div
          :class="[item.show ? 'merchant-icon-func' : '']"
          v-for="item in moduleData"
          :key="item.id"
        >
          <div v-if="item.show">
            <el-image
              class="cursor"
              style="width: 70px; height: 70px"
              :src="item.image"
              fit="fill"
              @click="handleOperate(item.id)"
            ></el-image>
            <div class="cursor" @click="handleOperate(item.id)">
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </section>
  </basic-container>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  components: {},
  data() {
    return {
      loading: false,
      labelData: {
        payTitle: "开票配置",
      },
      moduleData: [
        {
          id: 1,
          name: "常用配置",
          image: "/img/payinvoice-icon/pi_01.png",
          type: "",
          show: true,
        },
        {
          id: 2,
          name: "开票授权",
          image: "/img/payinvoice-icon/pi_02.png",
          type: "",
          show: true,
        },
        {
          id: 3,
          name: "默认开票设置",
          image: "/img/payinvoice-icon/pi_03.png",
          type: "",
          show: true,
        },
      ],
    };
  },
  watch: {},
  computed: {
    ...mapGetters(["permission", "selectMer"]),
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  created() {
  },
  methods: {
    /**
     * @func 支付信息功能
     * @desc 支付信息功能 操作控制
     * */
     handleOperate(id) {
      switch (id) {
        case 1:
          this.$router.push({
            path: '/rb-merchant/payinvoice/payinvoice_pages',
            name: "常用配置",
            query: {
              rpiNo: this.selectMer.rpiNo,
            },
          });
          break;
        case 2:
          break;
        case 3:
          this.$router.push({
            path: '/rb-merchant/payinvoice/payinvoice_default',
            name: "默认开票设置",
            query: {
              rpiNo: this.selectMer.rpiNo,
            },
          });
          break;
      }
    },
    /* 页面加载 初始化请求详情接口 */
    infoData() {
      this.loading = true;
      
    },
    /**
     * @func 返回页面
     * @desc 返回页面 goBack
     * */
    goBack() {
      this.$router.$avueRouter.closeTag();
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-image__error {
  background: #fff;
}

/deep/ .el-input-group__append {
  background: #409eff !important;
  color: #fff !important;
  padding: 0;
}
.merchant-box {
  display: flex;
  // justify-content: space-between;
  flex-wrap: wrap;
  &.adaptive {
    width: 100%;
    margin-left: -10px;
    margin-right: -10px;
  }
  .merchant-item-content {
    display: flex;
    flex-direction: column;
    width: calc(100% / 3);
    span {
      padding-left: 10px;
      padding-right: 10px;
      margin-bottom: 8px;
    }
  }
  .merchant-icon-func {
    width: calc(100% / 5);
    margin-bottom: 20px;
    text-align: center;
    .cursor {
      cursor: pointer;
    }
  }
  .merchant-icon-card {
    width: calc(100% / 4);
    .item-card {
      // display: flex;
      border-radius: 10px;
      background-color: #ffffff;
      padding: 20px;
      text-align: center;
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 10px;
      .item-card-label {
        display: flex;
        align-items: center;
      }
      .item-card-content {
        display: flex;
        align-items: center;
        margin-top: 20px;
      }
    }
  }
}
</style>